<template>
  <div>


    <div>
      <el-form>


        <el-form-item label="物业名称" prop="pmid">
          <el-select v-model="queryParams.pmid" placeholder="请选择物业名称" @visible-change="clearCarshomeList"
                     clearable>
            <el-option
              v-for="item in this.propertyList"
              :key="item.pmid"
              :label="item.propertyName"
              :value="item.pmid">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>



    <div class="box-contrain">
      <div style="width: 20%;border: rgba(90,94,102,0.24) solid 1px;padding: 15px">
        <div
          style="font-size: x-large;font-weight: bold;padding: 15px;text-align: left;border-bottom: rgba(90,94,102,0.24) solid 1px">
          车道列表
        </div>

        <template >
          <el-table
            :data="chomeList"
            style="width: 100%"  highlight-current-row :show-header="false" @row-click="handRow">

            <el-table-column  align="center" prop="chname" width="260px"/>
          </el-table>

        </template>

      </div>

      <div style="width: 70%; border: rgba(90,94,102,0.24) solid 1px;padding: 15px" class="edit">
        <el-tabs type="border-card" >
          <el-tab-pane label="车场基本信息">


            <div style="height: 500px">
              <el-form ref="elFormChome" :model="formDataChome"  size="medium" :disabled="true"
                       label-width="108px">
                <el-form-item label="所属物业" prop="propertyName">
                  <el-input v-model="formDataChome.propertyName" placeholder="请输入所属物业" clearable
                            :style="{width: '100%'}"></el-input>
                </el-form-item>
                <el-form-item label="所属车场" prop="chname">
                  <el-input v-model="formDataChome.chname" placeholder="请输入所属车场" clearable :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
                <el-form-item label-width="109px" label="支付离场时间" prop="goTime">
                  <el-input v-model="formDataChome.goTime" placeholder="请输入支付离场时间" clearable :style="{width: '100%'}">
                    <template slot="append">分钟</template>
                  </el-input>
                </el-form-item>
              </el-form>
            </div>



          </el-tab-pane>
          <el-tab-pane label="微信支付配置">

            <template>

              <div>
                <el-form ref="elFormPay" :model="formDataPay"  size="medium" label-width="100px">
                  <el-form-item label="商户类型" prop="merchantType">
                    <el-radio-group v-model="formDataPay.merchantType" size="medium">
                      <el-radio v-for="(item, index) in merchantTypeOptions" :key="index" :label="item.value"
                                :disabled="item.disabled">{{item.label}}</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="商户模式" prop="merchantMode">
                    <el-radio-group v-model="formDataPay.merchantMode" size="medium">
                      <el-radio v-for="(item, index) in merchantModeOptions" :key="index" :label="item.value"
                                :disabled="item.disabled">{{item.label}}</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="商户名" prop="merchantName" v-if="this.formDataPay.merchantType===0">
                    <el-input v-model="formDataPay.merchantName" placeholder="请输入商户名" clearable :style="{width: '100%'}">
                    </el-input>
                  </el-form-item>
                  <el-form-item label="商户号" prop="merchantId" v-if="this.formDataPay.merchantType===0">
                    <el-input v-model="formDataPay.merchantId" placeholder="请输入商户号" clearable :style="{width: '100%'}">
                    </el-input>
                  </el-form-item>
                  <el-form-item label-width="106px" label="微信支付签名" prop="wechatSignature" v-if="this.formDataPay.merchantType===0 && this.formDataPay.merchantMode===0">
                    <el-input v-model="formDataPay.wechatSignature" placeholder="请输入微信支付签名" clearable
                              :style="{width: '100%'}"></el-input>
                  </el-form-item>
                  <el-form-item label-width="106px" label="商家占比(%)" prop="merchantRatio" v-if="this.formDataPay.merchantType===0 && this.formDataPay.merchantMode===1">
                    <el-input v-model="formDataPay.merchantRatio" placeholder="请输入商家占比" clearable
                              :style="{width: '100%'}"></el-input>
                  </el-form-item>
                  <el-form-item label="姓名" prop="name" v-if="this.formDataPay.merchantType===1 ">
                    <el-input v-model="formDataPay.name" placeholder="请输入姓名" clearable :style="{width: '100%'}">
                    </el-input>
                  </el-form-item>
                  <el-form-item label="手机号" prop="phone" v-if="this.formDataPay.merchantType===1 ">
                    <el-input v-model="formDataPay.phone" placeholder="请输入手机号" clearable :style="{width: '100%'}">
                    </el-input>
                  </el-form-item>
                  <el-form-item label="openId" prop="openId" v-if="this.formDataPay.merchantType===1 ">
                    <el-input v-model="formDataPay.openId" placeholder="请输入openId" clearable :style="{width: '100%'}">
                    </el-input>
                  </el-form-item>
                  <el-form-item label-width="106px" label="个人占比(%)" prop="individualRatio" v-if="this.formDataPay.merchantType===1 && this.formDataPay.merchantMode===1">
                    <el-input v-model="formDataPay.individualRatio" placeholder="请输入个人占比" clearable
                              :style="{width: '100%'}"></el-input>
                  </el-form-item>
                  <el-form-item label-width="106px" label="车场占比(%)" prop="carsHomeRatio" v-if="this.formDataPay.merchantMode===1">
                    <el-input v-model="formDataPay.carsHomeRatio" placeholder="请输入车场占比" clearable
                              :style="{width: '100%'}"></el-input>
                  </el-form-item>
                  <el-form-item size="large">
                    <el-button type="primary" @click="submitFormPay">提交</el-button>
                    <el-button @click="resetFormPay">重置</el-button>
                  </el-form-item>
                </el-form>
              </div>













<!--              -->
<!--              <el-tabs v-model="activeName" @tab-click="handleClick">-->
<!--&lt;!&ndash;                <el-tab-pane v-for="(pane,index) in tabPanes" label="微信分账配置1" name="1">&ndash;&gt;-->
<!--&lt;!&ndash;                  <button @click="addEdit">新增配置</button>&ndash;&gt;-->
<!--&lt;!&ndash;                </el-tab-pane>&ndash;&gt;-->

<!--                <el-tab-pane v-for="(pane, index) in tabPanes" :key="index" :label="pane.label" :name="pane.name">-->
<!--                  &lt;!&ndash; 标签页内容 &ndash;&gt;-->
<!--                  <div>-->
<!--                    <el-form :model="form" :rules="rules" ref="form" label-width="120px">-->
<!--                      <div class="form-group">-->
<!--                        <el-radio-group v-model="form.receiver" @change="updateMode">-->
<!--                          <el-radio value="0" label="企业">企业</el-radio>-->
<!--                          <el-radio value="1" label="个人">个人</el-radio>-->
<!--                        </el-radio-group>-->
<!--                      </div>-->
<!--                      <div v-if="form.receiver === '0'">-->
<!--                        <div class="form-group">-->
<!--                          <el-radio-group v-model="form.mode" @change="updateFields">-->
<!--                            <el-radio value="0" label="单商户模式">单商户模式</el-radio>-->
<!--                            <el-radio value="1" label="服务商模式">服务商模式</el-radio>-->
<!--                          </el-radio-group>-->
<!--                        </div>-->
<!--                        <div v-if="form.mode === '0'">-->
<!--                          <el-form-item label="商户名称" prop="merchantName">-->
<!--                            <el-input v-model="form.merchantName" placeholder="请输入商户名称"></el-input>-->
<!--                          </el-form-item>-->
<!--                          <el-form-item label="商户号" prop="merchantId">-->
<!--                            <el-input v-model="form.merchantId" placeholder="请输入商户号"></el-input>-->
<!--                          </el-form-item>-->
<!--                          <el-form-item label="微信支付签名" prop="wechatSignature">-->
<!--                            <el-input v-model="form.wechatSignature" placeholder="请输入微信支付签名"></el-input>-->
<!--                          </el-form-item>-->
<!--                        </div>-->
<!--                        <div v-if="form.mode === '1'">-->
<!--                          <el-form-item label="商家占比" prop="merchantRatio">-->
<!--                            <el-input v-model="form.merchantRatio" placeholder="请输入商家占比"></el-input>-->
<!--                          </el-form-item>-->
<!--                          <el-form-item label="物业占比" prop="propertyRatio">-->
<!--                            <el-input v-model="form.propertyRatio" placeholder="请输入物业占比"></el-input>-->
<!--                          </el-form-item>-->
<!--                        </div>-->
<!--                      </div>-->
<!--                      <div v-if="form.receiver === '1'">-->
<!--                        <div class="form-group">-->
<!--                          <el-radio-group v-model="form.mode" @change="updateFields">-->
<!--                            <el-radio label="单商户模式">单商户模式</el-radio>-->
<!--                            <el-radio label="服务商模式">服务商模式</el-radio>-->
<!--                          </el-radio-group>-->
<!--                        </div>-->
<!--                        <div v-if="form.mode === '0'">-->
<!--                          <el-form-item label="姓名" prop="name">-->
<!--                            <el-input v-model="form.name" placeholder="请输入姓名"></el-input>-->
<!--                          </el-form-item>-->
<!--                          <el-form-item label="手机号" prop="phone">-->
<!--                            <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>-->
<!--                          </el-form-item>-->
<!--                          <el-form-item label="OpenID" prop="openid">-->
<!--                            <el-input v-model="form.openid" placeholder="请输入OpenID"></el-input>-->
<!--                          </el-form-item>-->
<!--                        </div>-->
<!--                        <div v-if="form.mode === '1'">-->
<!--                          <el-form-item label="个人占比" prop="individualRatio">-->
<!--                            <el-input v-model="form.individualRatio" placeholder="请输入个人占比"></el-input>-->
<!--                          </el-form-item>-->
<!--                          <el-form-item label="物业占比" prop="propertyRatio">-->
<!--                            <el-input v-model="form.propertyRatio" placeholder="请输入物业占比"></el-input>-->
<!--                          </el-form-item>-->
<!--                        </div>-->
<!--                      </div>-->
<!--                      <el-button type="primary" @click="submitForm">保存</el-button>-->
<!--                    </el-form>-->
<!--                  </div>-->







<!--                </el-tab-pane>-->

<!--              </el-tabs>-->
            </template>

          </el-tab-pane>
          <el-tab-pane label="支付宝配置">


            <div>
              <el-form ref="elFormAli" :model="formDataAli"  size="medium" label-width="100px">
                <el-form-item label="支付宝账号" prop="alipayAccount">
                  <el-input v-model="formDataAli.alipayAccount" placeholder="请输入支付宝账号" clearable
                            :style="{width: '100%'}"></el-input>
                </el-form-item>
                <el-form-item label-width="106px" label="账号真实姓名" prop="accountName">
                  <el-input v-model="formDataAli.accountName" placeholder="请输入账号真实姓名" clearable
                            :style="{width: '100%'}"></el-input>
                </el-form-item>
                <el-form-item label="个人占比(%)" prop="individualRatioAli">
                  <el-input v-model="formDataAli.individualRatioAli" placeholder="请输入个人占比" clearable
                            :style="{width: '100%'}"></el-input>
                </el-form-item>
                <el-form-item label="车场占比(%)" prop="carsHomeRatioAli">
                  <el-input v-model="formDataAli.carsHomeRatioAli" placeholder="请输入车场占比" clearable
                            :style="{width: '100%'}"></el-input>
                </el-form-item>
                <el-form-item size="large">
                  <el-button type="primary" @click="submitFormAli">提交</el-button>
                  <el-button @click="resetFormAli">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>

        </el-tabs>

      </div>
    </div>





  </div>

</template>
<script>


import {listProperty} from "@/api/modules/sys-property/property";
import {listHome} from "@/api/modules/sys-cars-home/home";
import {addWeChat, listWeChat, updateWeChat} from "@/api/modules/sys-cars-home/pay/weChat";
import {addAlipay, listAlipay, updateAlipay} from "@/api/modules/sys-cars-home/pay/alipay";

export default {


  data() {
    return {
      // 遮罩层
      loading: true,

      // 物业数据
      propertyList: [],


      //请求参数
      queryParams: {
        pmid: null
      },

      tableDataCHome:{
        chid:null,
        chname:null
      },

      formDataChome: {
        propertyName: undefined,
        chname: undefined,
        goTime: undefined,
      },

      chomeList:[],

      activeName:"1",

      formDataPay: {
        merchantType: 0,
        merchantMode: 0,
        merchantName: null,
        merchantId: undefined,
        wechatSignature: undefined,
        merchantRatio: undefined,
        name: null,
        phone: undefined,
        openId: undefined,
        individualRatio: undefined,
        carsHomeRatio: undefined,
        chid:null,
        message:""
      },
      merchantTypeOptions: [{
        "label": "企业",
        "value": 0
      }, {
        "label": "个人",
        "value": 1
      }],
      merchantModeOptions: [{
        "label": "单商户",
        "value": 0
      }, {
        "label": "服务商",
        "value": 1
      }],
      queryParamsPay:{
        chid: undefined
      },
//支付宝
      formDataAli: {
        alipayAccount: null,
        accountName: null,
        individualRatioAli: null,
        carsHomeRatioAli: null,
        chid:null,
        message:""
      },
      queryParamsAli:{
        chid:null
      }


    };
  },

  created() {

    this.getListProperty()
    this.getChomeList()
  },


  methods: {


    /** 查询物业列表 */
    getListProperty() {
      this.loading = true;
      listProperty(this.queryParams).then(response => {
        this.propertyList = response.rows;
        this.loading = false;
      });
    },

    getChomeList(){
     listHome(this.queryParams).then(res=>{
       this.chomeList=res.rows
        console.log(this.chomeList)
     })


    },
    //清除车场
    clearCarshomeList() {

      this.getChomeList()
    },

    handRow(row){
      this.formDataChome.chname=row.chname
      this.formDataChome.propertyName=row.propertyManagement.propertyName
      this.formDataChome.goTime=row.goTime

      this.queryParamsPay.chid=row.chid
      this.formDataPay.chid=row.chid

      this.queryParamsAli.chid=row.chid
      this.formDataAli.chid=row.chid


      listWeChat(this.queryParamsPay).then(res=>{
        if(res.rows.length==1){
          this.formDataPay=res.rows[0]
        }else {
          this.formDataPay = {
            merchantType: 0,
              merchantMode: 0,
              merchantName: null,
              merchantId: undefined,
              wechatSignature: undefined,
              merchantRatio: undefined,
              name: null,
              phone: undefined,
              openId: undefined,
              individualRatio: undefined,
              carsHomeRatio: undefined,
              chid:row.chid,
            message:"添加"
          }
        }
      })

      listAlipay(this.queryParamsAli).then(res=>{
        if(res.rows.length==1){
          this.formDataAli=res.rows[0]
        }else {
          this.formDataAli = {
            alipayAccount: null,
            accountName: null,
            individualRatioAli: null,
            carsHomeRatioAli: null,
            chid:row.chid,
            message:"添加"

          }
        }
      })
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },





    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 提交表单数据到服务器端处理，这里可以根据实际情况进行修改。
          // 可以使用 axios 或其他库发送 POST 请求，将表单数据发送到服务器端。
          // 这里只是示例，没有实际提交操作。
          console.log('表单数据提交成功！');
        } else {
          console.log('表单验证失败！');
          return false;
        }
      });
    },

    submitFormPay() {
      this.$refs['elFormPay'].validate(valid => {
        if (valid) {


          //添加
          if(this.formDataPay.message=="添加"){
            if(this.formDataPay.merchantMode==1){
              console.log(this.formDataPay.merchantRatio)
              console.log(this.formDataPay.carsHomeRatio)
              console.log(parseInt(this.formDataPay.merchantRatio)+parseInt(this.formDataPay.carsHomeRatio))
              if(parseInt(this.formDataPay.merchantRatio)+parseInt(this.formDataPay.carsHomeRatio)==100 || parseInt(this.formDataPay.individualRatio)+parseInt(this.formDataPay.carsHomeRatio)==100){
                addWeChat(this.formDataPay).then(res=>{
                  console.log(res)
                  this.$message({
                    message: '添加成功!',
                    type: 'success'
                  });
                })
              }else {
                this.$message({
                  message: '占比之和未达到100%',
                  type: 'warning'
                });
              }
            }else {
              addWeChat(this.formDataPay).then(res=>{
              })
          }
          }else {

            //修改
            if(this.formDataPay.merchantMode==1){
              if(parseInt(this.formDataPay.merchantRatio)+parseInt(this.formDataPay.carsHomeRatio)==100 || parseInt(this.formDataPay.individualRatio)+parseInt(this.formDataPay.carsHomeRatio)==100){
                updateWeChat(this.formDataPay).then(res=>{
                })
                this.$message({
                  message: '修改成功!',
                  type: 'success'
                });
              }else {
                this.$message({
                  message: '占比之和未达到100%',
                  type: 'warning'
                });
              }
            }else {
              updateWeChat(this.formDataPay).then(res=>{
              })
            }


          }


        }
        // TODO 提交表单
      })
    },
    resetFormPay() {
      this.$refs['elFormPay'].resetFields()
    },



    submitFormAli() {
      this.$refs['elFormAli'].validate(valid => {
        if (valid){
          console.log(this.formDataAli)
          //添加
          if(this.formDataAli.message=="添加"){

              if(parseInt(this.formDataAli.individualRatioAli)+parseInt(this.formDataAli.carsHomeRatioAli)==100){
                addAlipay(this.formDataAli).then(res=>{
                  this.$message({
                    message: '添加成功!',
                    type: 'success'
                  });
                })
              }else {
                this.$message({
                  message: '占比之和未达到100%',
                  type: 'warning'
                });
              }

          }else {

            //修改
            if(parseInt(this.formDataAli.individualRatioAli)+parseInt(this.formDataAli.carsHomeRatioAli)==100){
                updateAlipay(this.formDataAli).then(res=>{
                })
                this.$message({
                  message: '修改成功!',
                  type: 'success'
                });
              }else {
                this.$message({
                  message: '占比之和未达到100%',
                  type: 'warning'
                });
              }



          }




        }



      })
    },
    resetFormAli() {
      this.$refs['elFormAli'].resetFields()
    },

  }
};
</script>
<style lang="scss" scoped>


.box-contrain {
  width: 100%;
  height: 600px;
  //border: #00afff solid 1px;
  display: flex;
  justify-content: space-around;
}


</style>
